<template>
  <div>
    <div id="line" style="height: 420px;background: transparent;"/>
  </div>
</template>
<script>
import echarts from "echarts";
import { barechartAPI } from "@/api/ds/productOrder";
export default {

  data() {
    return {};
  },
  created() {
    this.getinfo()
  },
  methods: {
    getinfo(){
      barechartAPI().then(res=>{
        var data=res.data[0]
        var datalist=[
          { name:"总事业",value:data.queryTotalPerformance},
          { name:"总贡献值",value:data.userMoney.allmoney},
          { name:"总消费积分",value:data.totalConsumptionPoints},
          { name:"总GTFY",value:data.totalGtfy},
          { name:"总提现",value:data.gtfyWithdrawal},
          { name:"总金额",value: Number.parseFloat(data.queryTotalPerformance) - Number.parseFloat(data.totalActualPaymentAmount)},
          //  按照格式 name为x轴名称，value为对应的数据
        ]
        this.showchart(datalist)
      })
    },
    showchart(datalist) {
      var xlist =[], ylist = [];
      for (const key in datalist) {
        xlist.push(datalist[key].name);
        ylist.push(datalist[key].value);
      }
      var chartDom = document.getElementById("line");
      var myChart = echarts.init(chartDom);
      var option;
      option = {
  title: {
    text: '七日流水走势图'
  },
  tooltip: {
    trigger: 'axis'
  },
  legend: {
    data: ['事业', '贡献值', '积分', 'GTFY', '提现','金额']
  },
  grid: {
    left: '3%',
    right: '4%',
    bottom: '3%',
    containLabel: true
  },
  toolbox: {
    feature: {
      saveAsImage: {}
    }
  },
  xAxis: {
    type: 'category',
    boundaryGap: false,
    data: ['05-14', '05-15', '05-16', '05-17', '05-18', '05-19', '05-20','05-21']
  },
  yAxis: {
    type: 'value'
  },
  series: [
    {
      name: '事业',
      type: 'line',
      stack: 'Total',
      data: [136, 77, 93, 87, 76, 111, 78,94],
      smooth: true
    },
    {
      name: '贡献值',
      type: 'line',
      stack: 'Total',
      data: [149, 61, 84, 128, 164, 158, 162,85],
      smooth: true
    },
    {
      name: '积分',
      type: 'line',
      stack: 'Total',
      data: [168, 198, 173, 39, 145, 170, 167,156],
      smooth: true
    },
    {
      name: 'GTFY',
      type: 'line',
      stack: 'Total',
      data: [178, 143, 99, 132, 191, 122, 183,20],
      smooth: true
    },
    {
      name: '提现',
      type: 'line',
      stack: 'Total',
      data: [122, 194, 35, 176, 148, 153, 76,76],
      smooth: true
    },
    {
      name: '金额',
      type: 'line',
      stack: 'Total',
      data: [43, 6, 67, 98, 324, 77, 35,252],
      smooth: true
    }
  ]
};

      option && myChart.setOption(option);
    },
  },
};
</script>
<style>
</style>
